{extend name="_container/add1"}
{block name="top"}
<div class="layui-form-item" style="display: flex;align-items: center;box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);padding: 5px 40px">
    <div style="border: 1px solid sienna;margin-right: 20px">
        <input type="text" placeholder="请输入关键词搜索相关词汇" class="layui-input" style="width: 200px" onblur="searchCat(this.value)">
    </div>

    <div style="width: 500px;border: 1px solid sienna;margin-right: 20px">
        <select  class="select2" lay-ignore id="select_cat"  style="width: 100%" onchange="getWords(this.value)">
            <option value="">请选择相关词库</option>
        </select>
    </div>

    <textarea name="" id="words_textarea" class="layui-textarea" style="width: 100%;border: 1px solid sienna;"  placeholder="词库词举例" ></textarea>

</div>
{/block}
{block name="content"}

    <div class="layui-form-item" style="display: flex;justify-content: flex-start;align-items: center">
        <div style="width: 400px;border: 1px solid #6abd20">
            <select name="table_id" class="select2" lay-ignore id="select_table"  style="width: 100%;">
                <option value="">请选择要添加数据的表</option>
                {foreach $tables as $table}
                <option value="{$table.id}">{$table.comment}-{$table.name}</option>
                {/foreach}
            </select>
        </div>

        <div style="width: 100px;border: 1px solid #6abd20">
            <input name="count" type="number" value="" placeholder="默认10条" class="layui-input" >
        </div>

        <div style="width: 100px;border: 1px solid #6abd20">
            <select name="relation" class="select2" lay-ignore id="relation"  style="width: 100%;" onchange="getTable2Html()">
                <option value="">选择关系</option>
            </select>
        </div>

        <div style="width: 400px;border: 1px solid #6abd20">
            <select name="relation_id" class="select2" lay-ignore id="table_id2"   style="width: 100%;">
                <option value="">请选择条件数据表</option>
            </select>
        </div>

        <span style="color: #aaaaaa;margin-left: 10px;">*1对多，多对多:每个右边表增加n个左边</span>

    </div>

    <div class="layui-form-item">

        <table class="layui-table" id="fields" style="width: 100%">
            <tr>
                <th style="width: 140px">
                    字段中文名
                </th>
                <th style="width: 120px">
                    类型
                </th>
                <th style="width: 120px">
                    规则类型
                </th>
                <th>
                    规则参数
                </th>
                <th>
                    完整定义规则
                </th>
            </tr>
        </table>
    </div>




{/block}
{block name="js"}
<script src="/static/js/copyText.js"></script>
<script>
    function save_form3(obj) {
        save_form(obj, function (msg,returndata, url) {
            msg = msg === 'ok' ? '提交成功' : msg;
            layer.msg(msg);
        });
        return false;
    }
</script>

<script>
    $('#select_table').change(
        ()=>{
            let table_id = $('#select_table').val();
            if (table_id) {
                $.get('getFields?table_id=' + table_id, (data)=>{
                    let result = data.result;
                    $('#fields').html(result);
                    form.render()
                    $('.select2').select2()
                    $('.select3').select2({
                        tags: true
                    })
                })

                $.get('getRelationTypeByTableId?id=' + table_id, (data) => {
                    let result = data.result;
                    $('#relation').html(result).select2();
                    $('#table_id2').html('<option value="">请选择条件数据表</option>').select2();
                } )
            }else{
                $('#relation').html('<option value="">选择关系</option>').select2();
                $('#table_id2').html('<option value="">请选择条件数据表</option>').select2();
            }
        }
    )


    function getTable2Html(){
        let table_id = $('#select_table').val();
        let type = $('#relation').val()
        if(type) {
            $.get('getTable2Html?id=' + table_id + '&type=' + type, (data) => {
                let result = data.result;
                $('#table_id2').html(result).select2();
            } )
        }else{
            $('#table_id2').html('<option value="">请选择条件数据表</option>').select2();
        }
    }
</script>
<script>
    function searchCat(word) {
        $.get('getCatByWord?word=' + word, (data) => {
            $('#select_cat').html(
                data.result
            ).select2()
        })
    }

    function getWords(id) {
        if(id) {
            $.get('getWordsById?id=' + id, (data) => {
                copyText(id)
                $('#words_textarea').html(
                    data.result
                );
            })
        }else{
            $('#words_textarea').html(
                ''
            );
        }

    }


</script>
{/block}

{/extend}
